<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>

	<body>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.slide_wrapper {
				width: 500px;
				height: 100px;
				/*border: 1px solid #000;*/
				position: relative;
				margin: 100px auto;
				overflow: hidden;
				box-shadow: 2px 2px 5px #333333;
			}
			
			.skide {
				position: absolute;
				top: 0;
				left: 0;
				border-bottom: 50px solid transparent;
				border-top: 50px solid transparent;
				border-left: 50px solid skyblue;
				cursor: pointer;
			}
		</style>
		<div class="slide_wrapper">
			<div class="skide">

			</div>
		</div>

		<!--在移动端上看打印台信息，使用Vconsole-->
		<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js">
		</script>
		<script type="text/javascript">
			//			pc端跟事件
			//			onclick
			//			mousedown
			//			mousemove
			//			mouseup
			//			移动端事件touch
			//			touchtart
			//			touchmove
			//			touchhend
			var vc = new VConsole()
			var slide = document.querySelector(".skide")
			var s_wr = document.querySelector(".slide_wrapper")

			;
			(function() {
				var isClick = false;
				var start_x = 0;
				var now_x = 0;
				var delta_x = 0;
				slide.addEventListener("touchstart", function(e) {
					isClick = true;
					start_x = e.touches[0].clientX;
					console.log(e.touches)
				})
				document.addEventListener("touchmove", function(e) {
					if(!isClick) {
						return;
					}
					now_x = e.touches[1].clientX;
					delta_x = now_x - start_x;
					slide.style.left = delta_x + 'px'
					//if(now_x >= s_wr.getBoundingClientRect().right - 30) {
						//debugger

						//slide.style.left = 450 + 'px'
					//}
				})
				document.addEventListener("touchhend", function(e) {
					isClick = false;
					slide.style.left = 0 + 'px'
				})
			})()
			//			clickbox.onclick = function(){
			//				//alert("click")
			//				
			//				console.log("click")
			//			}
			//			touchbox.ontouchend = function(){
			//				
			//				console.log("ontouchend")
			//			}
			//			touchbox.ontouchmove = function(){
			//				console.log("ontouchmove")
			//			}
			//			touchbox.ontouchend = function(){
			//				console.log("ontouchend")
			//			}
		</script>
	</body>

</html>